<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../static/hplus/css/bootstrap.min.css">
<link rel="stylesheet"
      href="../static/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css">
<script type="text/javascript" src="../static/hplus/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/hplus/js/bootstrap.min.js"></script>
<script type="text/javascript"
        src="../static/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript"
        src="../static/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    $(function () {
        $("#table").bootstrapTable({
            url: "../html/query",
            pagination: true,
            striped: true,
            sidePagination: "server",
            pageSize: 3,
            queryParamsType: '',
            queryParams: query,
            columns: [{
                field: "id",
                title: "ID"
            }, {
                field: "billCode",
                title: "编码"
            }, {
                field: "productName",
                title: "姓名"
            }, {
                title: "操作",
                formatter: function (index, row, value) {
                    return "<button class='btn btn-primary' onclick='update(" + row.id + ")'>修改</button>"
                }
            }]
        })
    })

    function query(params) {
        a = params.pageNumber;
        b = params.pageSize;
        var temp = {
            "userName": $("#name").val(),
            "offset": params.pageNumber,
            "limit": params.pageSize,
        }
        return temp;
    }

    var a ;
    var d ;
    function search() {
        var userName = $('#name').val();
        $.ajax({
            url: "../html/query",
            data: {
                "userName": userName,
                "offset": a,
                "limit": b
            },
            success: function (data) {
                $('#table').bootstrapTable('load', data)
            }
        })
    }

    function update(id) {
        alert(id)
    }
</script>
<body>
<div class="panel panel-default">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
        <form class="form-inline" style="float: right">
            <div class="form-group">
                <input type="text" id="name" class="form-control" placeholder="请输入关键词"/>
            </div>
            <button type="button" onclick="search()" class="btn btn-primary">查询</button>
        </form>
        <table id="table"></table>
    </div>
</div>


</body>
</html>